<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div class="details_Header">
          <div class="deleted_Line"/>
          <span class="details_HeaderTitle">订单信息</span>
        </div>
        <div class="deleted_OrderHeader" style="border-left: none;">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单编号：</span>
              <span class="deleted_OrderTitle">{{ form.sn }}</span>
            </el-col>
            <!--            <el-col :span="8">-->
            <!--              <span class="deleted_Row_Headings">所属仓库：</span>-->
            <!--              <span class="deleted_OrderTitle">{{ form.shopName }}</span>-->
            <!--            </el-col>-->
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{ form.orderStatus | orderStatus}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">创建时间：</span>
              <span class="deleted_OrderTitle">{{ form.createDate }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">团购名称：</span>
              <span class="deleted_OrderTitle">{{ form.groupBuyName }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">团购期数：</span>
              <span class="deleted_OrderTitle">{{ form.periodId }}</span>
            </el-col>
          </el-row>
          <div class="group_people">
            <span class="deleted_Row_HeadingsTwo">参团详情：</span>
            <div class="order_list_relationship_content">
              <div class="order_list_relationship">
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item">
                    <img class="order_list_relationship_itemImg" :src="form.avatar?form.avatar:logo"></img>
                  </div>
                  <span class="order_list_relationship_itemTitle">{{ form.nickname }}</span>
                </div>
              </div>
              <div class="order_list_relationship">
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item" v-if="form.linkedList[0] != null">
                    <img class="order_list_relationship_itemImg"
                         :src="form.linkedList[0].avatar?form.linkedList[0].avatar:logo"></img>
                  </div>
                  <span class="order_list_relationship_itemTitle"
                        v-if="form.linkedList[0] != null">{{ form.linkedList[0].nickname }}</span>
                </div>
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item" v-if="form.linkedList[1] != null">
                    <img class="order_list_relationship_itemImg"
                         :src="form.linkedList[1].avatar?form.linkedList[1].avatar:logo"></img>
                  </div>
                  <span class="order_list_relationship_itemTitle"
                        v-if="form.linkedList[1] != null">{{ form.linkedList[1].nickname }}</span>
                </div>
              </div>
              <div class="order_list_relationship">
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item" v-if="form.linkedList[2] != null">
                    <image class="order_list_relationship_itemImg"
                           :src="form.linkedList[2].avatar?form.linkedList[2].avatar:logo"></image>
                  </div>
                  <text class="order_list_relationship_itemTitle" v-if="form.linkedList[2] != null">
                    {{ form.linkedList[2].nickname }}
                  </text>
                </div>
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item" v-if="form.linkedList[3] != null">
                    <image class="order_list_relationship_itemImg"
                           :src="form.linkedList[3].avatar?form.linkedList[3].avatar:logo"></image>
                  </div>
                  <text class="order_list_relationship_itemTitle" v-if="form.linkedList[3] != null">
                    {{ form.linkedList[3].nickname }}
                  </text>
                </div>
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item" v-if="form.linkedList[4] != null">
                    <image class="order_list_relationship_itemImg"
                           :src="form.linkedList[4].avatar?form.linkedList[4].avatar:logo"></image>
                  </div>
                  <text class="order_list_relationship_itemTitle" v-if="form.linkedList[4] != null">
                    {{ orderData.linkedList[4].nickname }}
                  </text>
                </div>
                <div class="order_list_relationship_itemBox">
                  <div class="order_list_relationship_item" v-if="form.linkedList[5] != null">
                    <image class="order_list_relationship_itemImg"
                           :src="form.linkedList[5].avatar?form.linkedList[5].avatar:logo"></image>
                  </div>
                  <text class="order_list_relationship_itemTitle" v-if="form.linkedList[5] != null">
                    {{ form.linkedList[5].nickname }}
                  </text>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"/>
          <span class="details_HeaderTitle">买家信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">收货信息：</span>
                <div>
                  <span class="deleted_OrderName">{{ form.consignee }} {{ form.phone }}</span>
                  <span class="deleted_OrderName" style="margin-top: 5px; width: auto;">{{ form.address }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">买家留言：</span>
              <span class="deleted_OrderTitle">{{ form.memo }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name">
          <div class="deleted_Line"/>
          <span style="margin: 10px 5px;">商品明细</span>
        </div>
        <!--商品规格-->
        <el-table :data="form.itemList" border show-summary stripe style="width: 100%">
          <el-table-column label="排序" type="index" width="50" align="center" fixed/>
          <el-table-column label="缩略图" width="80">
            <template slot-scope="{row}">
              <img :src="row.thumbnail" style="width: 100%;"></img>
            </template>
          </el-table-column>
          <el-table-column label="商品名">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格" align="center">
            <template slot-scope="{row}">
              <span>{{ row.spec }}</span>
            </template>
          </el-table-column>
          <el-table-column label="货号/条码" width="170">
            <template slot-scope="{row}">
              <span>{{ row.sn }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" width="50" align="center">
            <template slot-scope="{row}">
              <span>{{ row.unit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="quantity" align="right" width="50"/>
          <el-table-column label="发货" prop="shippedQuantity" align="right" width="50"/>
          <el-table-column label="退货" prop="returnQuantity" align="right" width="50"/>
          <el-table-column label="单价" align="right" width="70">
            <template slot-scope="{row}">
              <span>{{ row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="金额" width="70" align="right" prop="amount"/>
          <el-table-column label="优惠" width="70" align="right" prop="discount"/>
          <el-table-column label="实收" width="70" align="right" prop="subTotal"/>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {find} from '@/api/groupOrder'
export default {
  name: "groupOrder-view",
  data() {
    return {
      form: {
        id: '',
        linkedList:[null,null,null,null,null,null]
      },
      logo: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/party-in-the-cart-user/%E4%B8%AA%E4%BA%BA%20(5).png'
    }
  },
  watch: { // 只要路由发生变化就重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal)
      if (newVal.name == 'groupOrder-view' && newVal.query.id != this.form.id) {
        this.form.id = newVal.query.id
        this.findClick()
      }
    }
  },
  filters:{
    orderStatus(val){
      if (val == '0'){
        return '待审核'
      }
      if (val == '1'){
        return '已成交'
      }
      if (val == '2'){
        return '已退款'
      }
      if (val == '3'){
        return '已取消'
      }
      if (val == '4'){
        return '已完成'
      }
    }
  },
  created() {
    var _this = this
    _this.form.id = this.$route.query.id
    _this.findClick()
  },
  methods:{
    findClick(){
      var _this = this
      find(_this.form.id).then(res=>{
        _this.form = res.data.groupOrder
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  box-sizing: border-box;
}

.details_Header {
  display: flex;
  align-items: center;
}

.deleted_Line {
  width: 2px;
  height: 12px;
  background-color: #409EFF;
}

.submit_payMethod_Content_Date {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 30, 0.3);
  line-height: 36px;
  /* display: block; */
  /* margin-top: 10rpx; */
}

.details_HeaderTitle {
  font-weight: 600;
  margin-left: 5px;
  display: block;
  width: 100px;
}

.deleted_OrderHeader {
  padding-top: 5px;
  padding-bottom: 10px;
  margin: 10px 0;
  border-left: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.deleted_OrderTitle {
}

.deleted_OrderContent {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details_PayHeader {
  display: flex;
  align-items: center;
  /*margin-top: 40px;*/
}

.details_Buyers {
  display: flex;
  align-items: center;
}

.deleted_Row_Headings {
  color: #666666;
}
.deleted_Row_HeadingsTwo{
  color: #666666;
  width: 100px;
}
.deleted_OrderName {
  color: #409EFF;
  margin-left: 5px;
  width: 155px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product_header_name {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  margin-top: 20px;
  font-weight: 600;
}

.el-dialog-div {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.product_header_Plans {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  margin-top: 20px;
  font-weight: 600;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.product_header_Plans_left {
  display: flex;
  align-items: center;
}

.order_list_relationship_content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}

.order_list_relationship {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.order_list_relationship_itemBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.order_list_relationship_item {
  width: 40px;
  height: 40px;
  background-color: #b4b4b4;
  border-radius: 50%;
}

.order_list_relationship_itemTitle {
  font-size: 12px;
  color: #333333;
  margin-top: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  margin-bottom: 40px;
}

.order_list_relationship_itemImg {
  width: 40px;
  height: 40px;
  background-color: #ea706a;
  border-radius: 50%;
}

.group_people {
  display: flex;
  flex-direction: row;
  width: 520px;
  margin-top: 20px;
}
</style>
